<template>
<div class='' align="center">
        <el-page-header @back="goBack"  content="岗位定义">
        </el-page-header>
        <el-row>
            <el-col :span="8">
                <el-input v-model="post" style="margin-left:350px;" placeholder="岗位名称" ></el-input>
            </el-col>
            <el-button type="primary" @click="addEmp()"  icon="el-icon-search">新增岗位</el-button>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table ref="singleTable" :data="this.pageInfo.list" highlight-current-row  style="width: 100%"> 
                <el-table-column property="stationid" label="岗位编号" width="150">
                </el-table-column>
                <el-table-column property="stationname" label="岗位名称" width="150">
                </el-table-column>
                <el-table-column width="200" label="操作">
                    <template slot-scope="temp">
                        <el-button icon="el-icon-delete" @click="remove(temp.row.stationid)" size="mini" type="danger">移除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination  :background="true" :pager-count="4" @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize" :total="pageInfo.total" :page-sizes="[3,6]" layout="total, sizes, prev, pager, next, jumper">
            </el-pagination>
          </el-col>
        </el-row>
        
</div> 
</template>

<script>
export default {
data() {
//这里存放数据
return {
    pageInfo:{},
	post:''
};
},
//计算属性
computed: {},
//方法集合
methods: {
    handleSizeChange(val) {
        this.goToPage(this.pageInfo.pageNum, val);
    },
    handleCurrentChange(val) {
        this.goToPage(val, this.pageInfo.pageSize);
    },
    goToPage(p, s) {
        let _this = this;
        this.loading = true;
        this.$http.get(`http://localhost:8080/api/post/${p}/${s}`).then(function(resp) {
            _this.pageInfo = resp.data;
            _this.loading = false;
        });
    },
    addEmp(){
        let _this = this;
        if(_this.post==''){
            _this.$message({
                message: '请输入要新增的岗位!',
                center: true,
                type: 'warring'
            });
            return;
        }
        this.$http.get(`http://localhost:8080/api/post/add/${_this.post}`).then(function(resp) {
            if(resp.data.code=="200"){
                _this.$message({
                    message: '新增员工成功!',
                    center: true,
                    type: 'success'
                });
                _this.post='';
                _this.goToPage(1,3);
            }
        })
    },
    remove(id) {
        let _this = this;
        this.$confirm('此操作将永久删除该岗位, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }).then(() => {
            this.$http.delete(`http://localhost:8080/api/post/remove/${id}`).then(function(resp) {
            if(resp.data.code=="200"){
                _this.$message({
                    message: '删除成功!',
                    center: true,
                    type: 'success'
                });
                _this.goToPage(1,3);
            }
            })
        }).catch(() => {
            this.$message({
            type: 'info',
            message: '已取消删除'
            });          
        });
    },
},
//挂载完成（可以访问DOM元素）
mounted() {
    this.goToPage(1,3);
},
//监控data中的数据变化
watch: {

}
}
</script>
<style  scoped>
/*@import url(); 引入公共css类*/

</style>